<template>
  <div>
    <div class="main-container">
      <div class="header-title">选送单位</div>
      <el-descriptions
        :label-style="labelStyle"
        :content-style="contentStyle"
        :column="column"
      >
        <el-descriptions-item label="原单位/医院名称">{{
          form.unitHospitalName
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人姓名">{{
          form.applicantName
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-container">
      <div class="header-title">进修科目</div>
      <el-descriptions
        :label-style="labelStyle"
        :content-style="contentStyle"
        :column="column"
      >
        <el-descriptions-item label="进修科目">{{
          form.registerDeptName
        }}</el-descriptions-item>
        <el-descriptions-item label="进修批次">{{
          form.batchName
        }}</el-descriptions-item>
        <el-descriptions-item label="进修形式">{{
          form.educationType
        }}</el-descriptions-item>
        <el-descriptions-item label="进修期限">{{
          form.durationName
        }}</el-descriptions-item>
        <el-descriptions-item label="进修时间"
          >{{ form.durationStartDate }} - {{ form.durationEndDate }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-container" v-if="form.joinMicrosutureTrain == 1">
      <div class="header-title">显微血管缝合操作培训</div>
      <el-descriptions
        :label-style="labelStyle"
        :content-style="contentStyle"
        border
      >
        <el-descriptions-item label="显微血管缝合操作培训"
          >参加培训</el-descriptions-item
        >
        <el-descriptions-item label="培训费用">2800</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-container">
      <div class="header-title">进修要求与目的</div>
      <pre class="textarea-container">{{ form.educationAskObjective }}</pre>
    </div>
    <div class="main-container">
      <div class="header-title">个人信息</div>
      <el-descriptions
        :label-style="labelStyle"
        :content-style="contentStyle"
        :column="column"
      >
        <el-descriptions-item label="姓名">{{
          form.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          ["", "男", "女"][form.gender]
        }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{
          form.nation
        }}</el-descriptions-item>
        <el-descriptions-item label="从事专业">{{
          form.profession
        }}</el-descriptions-item>
        <el-descriptions-item label="政治面貌">{{
          form.politicalOutlook
        }}</el-descriptions-item>
        <el-descriptions-item label="健康状况">{{
          form.healthCondition
        }}</el-descriptions-item>
        <el-descriptions-item label="职称">{{
          form.technicalTitle
        }}</el-descriptions-item>
        <el-descriptions-item label="职务">{{
          form.duties
        }}</el-descriptions-item>
        <el-descriptions-item label="证件类型">{{
          form.idCardType
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{
          form.idCard
        }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{
          form.birthday
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ form.age }}</el-descriptions-item>
        <el-descriptions-item label="最高学历">{{
          form.highestDegree
        }}</el-descriptions-item>
        <el-descriptions-item label="毕业院校">{{
          form.graduateSchool
        }}</el-descriptions-item>
        <el-descriptions-item label="何时参加工作">{{
          form.startWorking
        }}</el-descriptions-item>
        <el-descriptions-item label="何时获得职业资格证书">{{
          form.doctorCertificateDate
        }}</el-descriptions-item>
        <el-descriptions-item label="资格证书编号">{{
          form.doctorCertificateNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="执业证书编号">{{
          form.practicingCertificateNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="操作设备的名称">{{
          form.operatingDevice
        }}</el-descriptions-item>
        <el-descriptions-item label="是否从事放射诊疗技术岗位"
          >{{ ["", "是", "否"][form.engagedRadiatePost] }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-container">
      <div class="header-title">联系方式</div>
      <el-descriptions
        :label-style="labelStyle"
        :content-style="contentStyle"
        :column="column"
      >
        <el-descriptions-item label="手机号码">{{
          form.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          form.email
        }}</el-descriptions-item>
        <el-descriptions-item label="单位电话">{{
          form.workTelephone
        }}</el-descriptions-item>
        <el-descriptions-item label="邮编">{{
          form.zipCode
        }}</el-descriptions-item>
        <el-descriptions-item label="单位等级">{{
          form.unitLevel
        }}</el-descriptions-item>
        <el-descriptions-item label="医院级别">{{
          form.hospitalLevel
        }}</el-descriptions-item>
        <el-descriptions-item label="单位名称">{{
          form.unitName
        }}</el-descriptions-item>
        <el-descriptions-item label="单位地址"
          >{{ form.unitProvince }}{{ form.unitCity }}{{ form.unitDistrict
          }}{{ form.unitAddress }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-container">
      <div class="header-title">政治表现</div>
      <div class="textarea-container">{{ form.politicalRepresentation }}</div>
    </div>
    <div class="main-container">
      <div class="header-title">拟进修专业方面的工作基础</div>
      <div class="textarea-container">{{ form.proposedMajor }}</div>
    </div>
    <div class="main-container" style="text-align: center">
      <div class="header-title">学习经历（从大学起）</div>
      <el-table :data="form.registerLearnVoList">
        <el-table-column label="开始时间" align="center" prop="startDate" />
        <el-table-column label="结束时间" align="center" prop="endDate" />
        <el-table-column label="学校名称" align="center" prop="schoolName" />
        <el-table-column
          label="院系名称"
          align="center"
          prop="professionName"
        />
        <el-table-column
          label="专业名称"
          align="center"
          prop="designationName"
        />
        <el-table-column label="学历" align="center" prop="education" />
        <el-table-column label="学位" align="center" prop="academicDegree" />
      </el-table>
    </div>
    <div class="main-container" style="text-align: center">
      <div class="header-title">工作经历</div>
      <el-table :data="form.registerWorkVoList">
        <el-table-column label="开始时间" align="center" prop="startDate" />
        <el-table-column label="结束时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.endDate ? scope.row.endDate : "至今" }}
          </template>
        </el-table-column>
        <el-table-column label="医院级别" align="center" prop="hospitalLevel"
          >>
          <template slot-scope="scope">
            {{ scope.row.hospitalLevel }}{{ scope.row.hospitalTwoLevel }}
          </template>
        </el-table-column>
        <el-table-column label="单位名称" align="center" prop="hospitalName" />
        <el-table-column label="科室名称" align="center" prop="deptName" />
        <el-table-column label="职称" align="center" prop="technicalTitle" />
        <el-table-column label="职务" align="center" prop="duties" />
      </el-table>
    </div>
    <div class="main-container" style="text-align: center">
      <div class="header-title">外语水平</div>
      <el-table :data="form.registerLanguageVoList">
        <el-table-column label="外语语种" align="center" prop="languages" />
        <el-table-column label="读写能力" align="center" prop="literacy" />
        <el-table-column
          label="听说能力"
          align="center"
          prop="listenAndSpeak"
        />
      </el-table>
    </div>
    <div class="main-container" style="text-align: center">
      <div class="header-title">操作记录</div>
      <el-table :data="form.optLogVoList">
        <el-table-column label="操作人" align="center" prop="fromUsername" />
        <el-table-column label="操作" align="center" prop="optDesc" />
        <el-table-column label="操作时间" align="center" prop="optTime" />
      </el-table>
    </div>
    <div class="main-container">
      <div class="header-title">审批进度</div>
      <el-timeline>
        <el-timeline-item v-for="item in auditLogVoList" :key="item.id">
          <div slot="dot" class="dot">{{ item.sort }}</div>
          <div class="time-container">
            <div>
              <span>{{ item.typeName }}</span>
              <el-tag effect="dark" size="mini">{{ item.auditStatus }}</el-tag>
            </div>
            <div>
              操作人：{{
                item.auditUserName ? item.auditUserName : form.applicantName
              }}
            </div>
            <div v-if="item.remark">审批建议：{{ item.remark }}</div>

            <div>
              提交时间：{{
                parseTime(item.createTime, "{yyyy}/{mm}/{dd} {hh}:{ii}:{ss}")
              }}
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { consts } from "@/api/business/consts";
import { getAuditLog, getRegisterInfo } from "@/api/business/registerInfo";
import { parseTime } from "@/utils/ruoyi";

export default {
  props: {
    registerId: null,
    stepActive: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      form: {},
      batchList: [],
      batchNameList: [],
      durationList: [],
      durationNameList: [],
      durationDateList: [],
      consts: consts,
      column: 1,
      labelStyle: {
        width: "150px",
      },
      contentStyle: {
        width: "350px",
      },
      auditLogVoList: [], //审批记录
    };
  },
  watch: {
    registerId: {
      immediate: true,
      handler() {
        this.getInfo();
        this.getAuditLog();
      },
    },
  },
  methods: {
    parseTime,
    getInfo() {
      getRegisterInfo(this.registerId).then((response) => {
        this.form = response.data;
      });
    },
    //获取审批记录
    getAuditLog() {
      getAuditLog(this.registerId).then((response) => {
        const mergedLogs = [
          ...response.data.graduationLog,
          ...response.data.registerLog,
        ];

        this.auditLogVoList = mergedLogs.map((item, index) => {
          item.sort = mergedLogs.length - index; // Starting from the total length and counting down
          return item;
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.textarea-container {
  font-family: "Microsoft YaHei";
  white-space: pre-line;
  height: 200px;
  padding: 15px;
  border: 1px solid #f2f3f5;
  border-radius: 10px;
  overflow-y: auto;
}

.image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #f2f3f5;
  border-radius: 10px;
  margin-right: 15px;
}

::v-deep .el-tabs__item {
  font-size: 18px;
  font-weight: bolder;
}

.time-container {
  line-height: 25px;

  .el-tag {
    margin-left: 10px;
  }
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #a52529;
  color: white;
  text-align: center;
  line-height: 20px;
  margin-left: -5px;
}

.main-container {
  width: 1000px;
  margin-left: calc((100% - 1000px) / 2);
  margin-bottom: 15px;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 0 rgba(157, 156, 156, 0.1);
}

.header-title {
  background-color: #f2f3f5;
  height: 50px;
  line-height: 50px;
  font-weight: bolder;
  font-size: 18px;
  padding-left: 15px;
  border-left: 6px solid #a52529;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;

  .desc {
    font-size: 16px;
    font-weight: normal;

    .red {
      color: #a52529;
    }
  }

  .download {
    color: #409eff;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
  }
}

.image-box {
  padding-bottom: 10px;
}
</style>
